<template>
  <div class="ground" v-loading="isloadMsg">
    <div class="content">
      <div class="paper" style="padding-bottom: 22px;">
        <div class="operations">
          <i title="申诉" @click="isAppeal=true"><img src="../assets/paperInfo/appeal.png"/></i>
          <!--
            <i title="引用" @click="quote"><img src="../assets/paperInfo/quote.png"/></i>
          -->
          <i title="收藏" v-if="!isCollected" @click="collect">
            <img src="../assets/paperInfo/collect.png"/>
          </i>
          <i title="取消收藏" v-else @click="disCollect">
            <img src="../assets/paperInfo/collected.png"/>
          </i>
          <i title="下载" v-if="url"><a :href="url" target="_blank"><img src="../assets/paperInfo/download.png"/></a></i>
          <i title="分享" @click="share"><img src="../assets/paperInfo/share.png"/></i>
        </div>
        <div class="clear"></div>
        <header>
          <img src="../assets/paperInfo/logo.png" @click="mainPage"/>
          <span>
            {{paperTitle}}
          </span>
        </header>
        <div class="authors">
          <span v-for="v of min(authors.length,6)" :key="v" @click="checkout(v-1)">
            <a>{{authors[v-1].name}}</a>
          </span>
        </div>
        <div class="organization">
          <span>{{authors[0].org}}</span>
        </div>

        <div class="paperInfo">
          <div class="row" ref="abstract">
            <span class="item">摘要：</span>
            <span class="wrap">
              {{abstract}}&nbsp;&nbsp;
            </span>
            <div class="textControl" v-if="isOverLen">
              <span v-show="isExpressed" @click="unExpress()">展开</span>
              <span v-show="!isExpressed" @click="Express()">收起</span>
            </div>
          </div>

          <div class="row">
            <span class="item">关键词：</span>
            <span v-if="keywords.length==0">无</span>
            <span v-for="v of keywords.length" :key="v">
              <a v-if="v<=7" class="hasLink" @click="keywordSearch(keywords[v-1])">{{keywords[v-1]}}</a>
            </span>
          </div>

          <div class="row">
            <span class="item">年份：</span>
            <span>{{year}}</span>
          </div>

          <div class="row">
            <span class="item">DOI：</span>
            <span>{{docID}}</span>
          </div>

          <div class="row">
            <span class="item">语言：</span>
            <span>{{language}}</span>
          </div>

          <div class="row">
            <span class="item">出版：</span>
            <span v-if="venueName!=''">
              {{venueName}}
              <span v-if="issue!=''">
                {{issue}}期
              </span>
            </span>
            <span v-else>无</span>
          </div>

          <div class="row">
            <span class="item">页号：</span>
            <span>{{pageSt}} - {{pageEd}}</span>
          </div>

          <div class="row">
            <span class="item">被引量：</span>
            <span>{{citation}}</span>
          </div>
          <!--
            <div class="row">
              <span class="item">来源：</span>
              <span v-for="v of sources.length" :key="v">
                <a class="hasLink" @click="toSourcePage(v-1)">{{sources[v-1]}}</a>
              </span>
            </div>
          -->
        </div>

        <!--
          <div class="relatedPapers">
            <span class="paperType" v-for="v of liters.length" :key="v" @click="opLiter(v-1)">
                {{liters[v-1]}}
            </span>
            <div class="underline">
              _________________________________________________________________________________________________________________________________
            </div>
            <div id="slider">
              ______
            </div>
            
            <div class="paperList">
              <p></p>
              <div v-for="v of relatedPapers.length" :key="v" style="margin-top:8px;">
                <span style="color:#b5a7a5;margin-right:8px">[{{v}}]</span>
                <span class="hasLink" @click="toRelatedPage(relatedPapers[v-1].paperId)">{{relatedPapers[v-1].name}}</span>
              </div>
            </div>
          </div>
        -->
      </div>
      
      <hr/>

      <div class="commentArea" >
        <div class="commentHeader">
          <span style="display:flex;align-items:center">
            <span style="font-weight:bold;font-size:24px;">评论</span>
            <span style="margin:2px 0 0 10px;color:grey;">{{commentNum}}</span>
          </span>
          <span>
            <span class="sort" @click="sortByHot">按热度排序</span>
            <span class="sort" style="margin-left:14px;" @click="sortByTime">按时间排序</span>
          </span>
        </div>

        <div class="myComment">
          <img :src="form.avatar"/>
          <el-input
            type="textarea"
            :rows="3"
            placeholder="发表新评论"
            resize="none"
            v-model="newComment">
          </el-input>
          <span @click="postRootComment()">发表</span>
        </div>
        
        <div class="infinite-list-wrapper" style="overflow:auto" v-if="comments.length!=0">
          <ul class="comments" style="margin-top:30px;"
            v-infinite-scroll="load" infinite-scroll-distance="20"
            infinite-scroll-disabled="disabled">
            <li class="rootComment" v-for="v in count" :key="v">
              <div v-if="comments[v-1]">
                <div class="rootAvatar" @click="toOtherUserPage(comments[v-1].userId)">
                  <img :src="comments[v-1].avatar"/>
                </div>
                <div class="rootContent" @mouseenter="enterComment(v,-1)" @mouseleave="leaveComment()">
                  <div style="display:flex;align-items:center;">
                    <span style="font-size:15px;color:rgb(100,110,120)">
                      {{comments[v-1].username}}
                    </span>
                    <span class="authorSign" v-show="authorUserIDs.indexOf(comments[v-1].userId)!=-1">
                      作者
                    </span>
                  </div>
                  <div style="margin:10px 0 10px 0;">
                    {{comments[v-1].content}}
                  </div>
                  <div class="rootCommentInfo">
                    <span>
                      {{comments[v-1].time}}
                      <span class="reply" @click="replyRootAt(v)">
                        回复
                      </span>
                      <span v-show="pos[0]==v&&pos[1]==-1" style="cursor:pointer" @click="opComment()"
                      @mouseenter="isOperate=true" @mouseleave="isOperate=false">
                        <i style="transform:rotate(90deg)" class="el-icon-more"></i>

                        <span v-show="isOp" class="operation" @click="preCommentId=comments[v-1].commentId;delSeq=v-1;isDelRoot=true">
                          <span v-if="comments[v-1].userId==form.userID" @click="isDel=true">
                            删除
                          </span>
                          <span v-else @click="isReport=true">举报</span>
                        </span>
                      </span>
                    </span>
                  </div>
                </div>

                <div class="replies">
                  <div v-for="i of comments[v-1].reply.length" 
                  :key="i" @mouseenter="enterComment(v,i)" @mouseleave="leaveComment()">
                    <div style="min-height:70px;padding-top:20px;" 
                    v-show="i<=currentPages[v-1]*pageSizes[v-1]&&i>(currentPages[v-1]-1)*pageSizes[v-1]">
                      <div class="replyAvatar" @click=toOtherUserPage(comments[v-1].reply[i-1].userId)>
                        <img :src="comments[v-1].reply[i-1].avatar"/>
                      </div>
                      <div style="display:flex;align-items:center;">
                        <span style="font-size:13px;color:rgb(100,110,120)">
                          {{comments[v-1].reply[i-1].username}}
                        </span>
                        <span class="authorSign" v-show="authorUserIDs.indexOf(comments[v-1].reply[i-1].userId)!=-1">
                          作者
                        </span> 
                      </div>
                      <div style="margin:5px 0 5px 0;font-size:14px;">
                        <span v-if="comments[v-1].reply[i-1].atUserName">
                          回复 
                          <span class="atSomeone">
                            @{{comments[v-1].reply[i-1].atUserName}}
                          </span>:
                        </span>
                        {{comments[v-1].reply[i-1].content}}
                      </div>
                      <div class="replyCommentInfo">
                        <span>
                          {{comments[v-1].reply[i-1].time}}
                          <span class="reply" @click="replyAt(v-1,i-1)">回复</span>
                          <span v-show="pos[0]==v&&pos[1]==i" style="cursor:pointer" @click="opComment()"
                          @mouseenter="isOperate=true" @mouseleave="isOperate=false"> 
                            <i style="transform:rotate(90deg)" class="el-icon-more"></i>

                            <span v-show="isOp" class="innerOperation" @click="preCommentId=comments[v-1].reply[i-1].commentId">
                              <span v-if="comments[v-1].reply[i-1].userId==form.userID" @click="isDel=true">
                                删除
                              </span>
                              <span v-else @click="isReport=true">举报</span>
                            </span>
                          </span>
                        </span>
                      </div>
                    </div>
                  </div>

                  <div class="wrapComment" v-if="pageSizes[v-1]==3&&comments[v-1].reply.length>3">
                    共计{{comments[v-1].reply.length}}条评论,
                    <span @click="open(v-1)">点击展开</span>
                  </div>

                  <div class="pages" v-show="pageSizes[v-1]==6">
                    <el-pagination
                      :current-page.sync="currentPages[v-1]"
                      :hide-on-single-page="true"
                      :page-size="pageSizes[v-1]"
                      layout="total, prev, pager, next"
                      :total="comments[v-1].reply.length">
                    </el-pagination>
                  </div>
                </div>

                <div v-show="prepareComment==v" style="margin-top:-10px;">
                  <div class="myComment" >
                    <img :src="form.avatar"/>
                    <el-input
                      type="textarea"
                      :rows="3"
                      :placeholder=atUserName
                      resize="none"
                      v-model="newComment2">
                    </el-input>
                    <span @click="postComment(comments[v-1].commentId)">发表</span>
                  </div>
                </div>

                <hr/>
              </div>
            </li>
          </ul>

          <div v-if="isLoading" class="appendixInfo">
            加载中...
          </div>
          <div v-if="noMore&&!isLoading" class="appendixInfo">
            没有更多评论
          </div>
        </div>
      </div>

      <div id="backToTop" style="display:none">
        <span @click="backToTop">
          <i class="el-icon-arrow-up" style="margin-top:-2px;"></i>
        </span>
      </div>
    </div>

    <el-dialog :visible.sync="isAppeal" title="论文申诉" width="400px">
      <el-form :model="form">
        <el-form-item label="学者信息：">
          <el-select v-model="appealAuthor" placeholder="请选择论文作者">
            <el-option
              v-for="item in authors"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学者ID：(可在学者门户页面获取)">
          <el-input v-model="oldScholarId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="申诉信息：">
          <el-input type="textarea" resize="none" rows="4"
          v-model="reportInfo" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isAppeal=false">取消</el-button>
          <el-button type="primary" @click="appealPaper()"
          >确认</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog :visible.sync="isReport" title="举报评论" width="400px">
      <el-form :model="form">
        <el-form-item label="举报理由：">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isReport=false;isOp=false">取消</el-button>
          <el-button type="primary" @click="reportComment()"
          >确认</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog :visible.sync="isDel" title="删除评论" width="400px">
      <div>是否确认删除该条评论？所有回复也将被删除。</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isDel=false;isOp=false">取消</el-button>
          <el-button type="primary" @click="delComment()"
          >确认</el-button>
        </span>
      </template>
    </el-dialog>

  </div>  
</template>

<script>
export default {
  name: "paperInfo",
  data() {
    return {
      form: {
        paperID: "53e99f64b7602d9702836bd4",
        sessionID: "",
        userID: "b9ff9b40-20bc-42df-b3a4-3315ff0aa61d",
        avatar: ""
      },
      paperTitle: "计算机视觉辅助斜拉桥索受力测试试验研究",
      authors: [
                {
                  name: "ZHANG Xin-hui",
                  org: "College of Agronomy,Gansu Agricultural University.Lanzhou ,China",
                  id: "542ca89ddabfae48d12241fc"
                }
               ],
      
      authorUserIDs: [345,23,21,23,5],

      venueID: "无",
      venueName: "",
      keywords: [],
      citation: 0, //被引量

      pageSt: 0, //
      pageEd: 0, //
      language: "cn",//
      year: 2022,
      volume: "无",
      issue: "",

      docID: "无",
      
      //sources: ["国家科技图书文献中心","维普期刊专业版","知网","掌桥科研","钛学术"],
      url: null, //外部链接
      abstract: "无",
      isExpressed: true,
      isOverLen: false,

      papers: [ 
                [
                  {name:"计算机视觉辅助genshin",paperId:5},
                  {name:"2022软工测试",paperId:6},
                  {name:"mips",paperId:6},
                  {name:"计网",paperId:6},
                  {name:"系统编程",paperId:6}
                ]
              ],
      liters: ["相似文献"],
      slide: ["20px"],
      relatedPapers: [],

      newComment: "",
      newComment2: "",
      atUserName: "",
      atUserId: 45,
      atCommentId: 0,

      count: 0,
      isLoading: false,
      pos: [-2,-2],
      isOperate: false,
      isOp: false,
      comments: [
        {
          username: "小黑子",
          userId: 4,
          avatar: require("../assets/paperInfo/commonAvatar.png"),
          content: "你干嘛~哎哟~",
          commentId: 1,
          time: "2022-11-20 22:22",
          reply: [
            {
              username: "迎面走来的你让我如此蠢蠢欲动",
              userId: 6,
              avatar: require("../assets/paperInfo/commonAvatar.png"),
              content: "小黑子，露出鸡脚了吧。",
              commentId: 2,
              time: "2022-11-21 04:23",
              atUserName: "小黑子"
            }
          ]
        }
      ],
      commentNum: 0,

      preCommentId: 6,

      isAppeal: false,
      appealAuthor: "",
      oldScholarId: "",
      isReport: false,
      reportInfo: "",
      reportReason: "",
      options: [{
          value: '1',
          label: '垃圾内容'
        }, {
          value: '2',
          label: '色情内容'
        }, {
          value: '3',
          label: '非法活动'
        }, {
          value: '4',
          label: '侵犯版权'
        }, {
          value: '5',
          label: '骚扰、欺凌和威胁'
        }, {
          value: '6',
          label: '仇恨言论'
        }, {
          value: '7',
          label: '暴力内容'
        }],
      value: '',
      isloadMsg: false,
      isDel: false,
      delSeq: 0,
      isDelRoot: false,
      isCollected: false,
      prepareComment: -1,
      pageSizes: [],
      currentPages: [],
      firstTime: true
    }
  },
  methods: {
    getInfo() {
      this.$axios({
        method: "get",
        header: {cookie:`sessionId=${this.form.sessionID}`},
        url: '/api/getPaperPage',
        params:{ paperId:this.form.paperID }
      })
      .then((res) => {
        let val=res.data.post.data[0]
        console.log(res.data)
        this.paperTitle=val.title
        this.form.userID=res.data.userData.userId
        this.authors=val.authors
        if(val.venue)
        {
          this.venueID=val.venue.id
          this.venueName=val.venue.raw
        }
        this.isCollected=res.data.userData.isBookmark
        if(val.keywords)
          this.keywords=val.keywords
        this.citation=val.n_citation
        this.issue=val.issue
        this.pageSt=val.page_start
        this.pageEd=val.page_end
        this.language=val.lang
        if(val.abstract)
        {
          this.abstract=val.abstract
          if(this.abstract.length>1500)
          {
            this.isOverLen=true;
            this.Express();
          }
        }
        if(val.doi)
          this.docID=val.doi
        if(val.url)
          this.url=val.url[0]
        this.volume=val.volume
        this.year=val.year
        /*
        this.authorUserIDs=val.authorUserIDs
        this.papers=res.data.papers
        */
      })
      .catch((err) => {
        console.log(err);
      })

      this.$axios({
        method: "post",
        header: {cookie:`sessionId=${this.form.sessionID}`},
        url: '/api/createHistory',
        data: this.$qs.stringify({ 
          paperId: this.form.paperID,
          paperName: this.paperTitle
        })
      })
    },
    getComment() {
      this.$axios({
        method: "get",
        header: {cookie:`sessionId=${this.form.sessionID}`},
        url: '/api/getReviewList',
        params:{ paperId:this.form.paperID }
      })
      .then((res) => {
        this.comments=res.data.data;
        var i,j;
        for(i=0;i<this.comments.length;i++)
        {
          if(this.firstTime)
          {
            this.currentPages.push(1);
            this.pageSizes.push(3);
          }
          this.comments[i].avatar='http://120.46.205.87'+this.comments[i].avatar;
          for(j=0;j<this.comments[i].reply.length;j++)
            this.comments[i].reply[j].avatar='http://120.46.205.87'+this.comments[i].reply[j].avatar;
        }
        this.firstTime=false;
        this.calCommentNum();
      })
    },
    calCommentNum() {
      var i;
      this.commentNum=0;
      for(i=0;i<this.comments.length;i++)
        this.commentNum+=this.comments[i].reply.length;
      
      this.commentNum+=this.comments.length;
    },
    checkout(i) {
      //console.log(this.authors);
      let routeData = this.$router.resolve({ path: "/scholarprofile/" + this.authors[i].id });
      window.open(routeData.href, "_blank");
      /* this.$router.push({name:"scholarprofile",params:{sid:this.authors[i].id}}) */
    },
    quote() {
      /*
      this.$axios({
        method: "post",
        header: {cookie:`sessionId=${this.form.userID}`}
        url: /quotePaper,
        data: this.$qs.stringify({ paperId:this.form.paperID })
      }).then(res =>{
        //console.log(res);
        if(res.data.errno==1)
        {
          res.data.format;
          this.$copyText(res.data.format).then(
            res => {
              console.log(res);
              this.$message.success("引用成功，已将内容放在剪切板");
            },
            err => {
              console.log(err);
            }
          )
        }
      })
      */
    },
    share() {
      let sharelink = location.href;
      this.$copyText(sharelink).then(
        res => {
          console.log(res);
          this.$message.success("分享成功，已将内容放在剪切板");
        },
        err => {
          console.log(err);
        }
      )
    },
    mainPage() {
      this.$router.push({name:"home"});
    },
    keywordSearch(word) {
      let routeData = this.$router.resolve({name:"SearchResult",params:{fliter:"idea",content:word,type:0}}); 
      window.open(routeData.href, '_blank');
    },
    toSourcePage(i) {
      window.open(this.urls[i],'_blank');
    },
    opLiter(i) {
      var Oslider=document.getElementById("slider");
      Oslider.setAttribute("style","left:"+this.slide[i]);
      this.relatedPapers=this.papers[i];
    },
    toRelatedPage(pid) {
      let routeData = this.$router.resolve({path: `/paperInfo/${pid}`}); 
      window.open(routeData.href, '_blank');
    },
    sortByHot() {
      var Osort1=document.getElementsByClassName("sort")[0];
      var Osort2=document.getElementsByClassName("sort")[1];
      Osort1.setAttribute("style","color:rgb(23,169,218);");
      Osort2.setAttribute("style","margin-left:14px");

      this.comments.sort(function(a, b){
        return b.reply.length-a.reply.length;
      });
      
    },
    sortByTime() {
      var Osort1=document.getElementsByClassName("sort")[0];
      var Osort2=document.getElementsByClassName("sort")[1];
      Osort1.setAttribute("style","");
      Osort2.setAttribute("style","color:rgb(23,169,218);margin-left:14px");

      this.comments.sort(function(a, b){
        if(b.time > a.time) return 1;
        return -1;
      });
    },
    collect() {
      this.$axios({
        method: "post",
        header: {cookie:`sessionId=${this.form.sessionID}`},
        url: '/api/bookmark',
        data: this.$qs.stringify({ 
          paperId: this.form.paperID,
          paperName: this.paperTitle
        })
      }).then(res =>{
        console.log(res);
        if(res.data.errno==1001)
        {
          this.$message.success("收藏成功，可进入个人中心进行查看");
          this.isCollected=true;
        }
      })
    },
    disCollect() {
      this.$axios({
        method: "post",
        header: {cookie:`sessionId=${this.form.sessionID}`},
        url: '/api/bookmark',
        data: this.$qs.stringify({ 
          paperId: this.form.paperID,
          paperName: this.paperTitle
        })
      }).then(res =>{
        //console.log(res);
        if(res.data.errno==1001)
        {
          this.$message.success("取消收藏成功");
          this.isCollected=false;
        }
      })
    },
    load() {
      this.isLoading=true;
      setTimeout(() => {
        if(this.count+5<=this.comments.length)
          this.count+=5;
        else this.count=this.comments.length;

        this.isLoading=false;
      }, 1500)
    },
    loadAfterDel() {
      this.isLoading=true;
      setTimeout(() => {
        if(this.count+5<=this.comments.length-1)
          this.count+=5;
        else this.count=this.comments.length-1;

        this.isLoading=false;
      }, 100)
    },
    open(i) {
      this.$set(this.pageSizes,i,6);
    },
    enterComment(i,j) {
      this.$set(this.pos,0,i);
      this.$set(this.pos,1,j);
    },
    leaveComment() {
      this.$set(this.pos,0,-2);
      this.$set(this.pos,1,-2);
      this.isOp=false;
    },
    replyRootAt(i) {
      this.prepareComment=i;
      this.atUserName='回复 @'+this.comments[i-1].username+":";
      this.atUserId=this.comments[i-1].userId;
      this.atCommentId=this.comments[i-1].commentId;
    },
    replyAt(i,j) {
      this.prepareComment=i+1;
      this.atUserName="回复 @"+this.comments[i].reply[j].username+":";
      this.atCommentId=this.comments[i].commentId;
      this.atUserId=this.comments[i].reply[j].userId;
    },
    opComment() {
      this.isOp=true;
    },
    postRootComment() {
      if(this.newComment=="")
        this.$message.warning("评论内容为空");
      else
      {
        this.$axios({
          method: "post",
          header: {cookie:`sessionId=${this.form.sessionID}`},
          url: '/api/createReview',
          data: this.$qs.stringify({ 
            paperId: this.form.paperID,
            content: this.newComment,
          })
        })
        .then(res =>{
          this.newComment="";
          if(res.data.errno==1001)
          {
            this.$message.success("发布评论成功");
            this.getComment();
            if(this.count+5<=this.comments.length)
              this.count+=5;
            else this.count=this.comments.length;
            this.currentPages.push(1);
            this.pageSizes.push(3);
          }
          else if(res.data.errno==3001)
            this.$message.warning("您已被禁言");
        })
      }
    },
    postComment() {
      if(this.newComment2=="")
        this.$message.warning("评论内容为空");
      else
      {
        this.$axios({
          method: "post",
          header: {cookie:`sessionId=${this.form.sessionID}`},
          url: '/api/createReview',
          data: this.$qs.stringify({ 
            content: this.newComment2,
            reviewId: this.atCommentId,
            atUserId: this.atUserId
          })
        })
        .then(res =>{
          this.newComment2="";
          if(res.data.errno==1001)
          {
            this.$message.success("发布评论成功");
            this.getComment();
          }
          else if(res.data.errno==3001)
            this.$message.warning("您已被禁言");
        })
      }
    },
    appealPaper() {
      if(this.appealAuthor==""||this.reportInfo==""||this.oldScholarId=="")
        this.$message.warning("请完善申诉信息");
      else
      {
        console.log(this.appealAuthor)
        this.$axios({
          method: "post",
          header: {cookie:`sessionId=${this.form.sessionID}`},
          url: '/api/report/article',
          data: this.$qs.stringify({ 
            title: `申诉学术成果${this.paperTitle}`,
            oldScholarId: this.oldScholarId,
            paperId: this.form.paperID,
            scholarId: this.appealAuthor,
            description: this.reportInfo
          })
        })
        .then(res =>{
          console.log(res);
          this.isAppeal=false;
          this.reportInfo="";
          this.appealAuthor="";
          this.$message.success("申诉成功，申诉将在2~3个工作日内得到结果，请耐心等待!");
          /*
          if(res.data.errno==1)
            this.$message.success("申诉成功，申诉将在2~3个工作日内得到结果，请耐心等待!");
          else
            this.$message.warning("请勿重复发送申诉，若有疑问请联系管理员");
          */
        })
      }
    },
    toOtherUserPage(uid) {
      let routeData = this.$router.resolve({name:"userprofile",params:{uid:uid}}); 
      window.open(routeData.href, '_blank');
    },
    reportComment() {
      if(this.value=='')
        this.$message.warning("请选择举报内容");
      else
      {
        this.$axios({
          method: "post",
          header: {cookie:`sessionId=${this.form.sessionID}`},
          url: '/api/reportReview',
          data: this.$qs.stringify({ 
            reviewId: this.preCommentId,
            type: this.value
          })
        })
        .then(res =>{
          //console.log(res);
          this.value='';
          this.isReport=false;
          this.isOp=false
          if(res.data.errno==1001)
            this.$message.success("举报评论成功，结果将在2~3个工作日内得到，感谢您的反馈！");
          else
            this.$message.warning("请勿重复发送举报，若有疑问请联系管理员");
        })
      }
    },
    delComment() {
      this.$axios({
        method: "post",
        header: {cookie:`sessionId=${this.form.sessionID}`},
        url: '/api/deleteReview',
        data: this.$qs.stringify({ 
          reviewId: this.preCommentId
         })
      })
      .then(res =>{
        //console.log(res);
        this.isDel=false;
        this.isOp=false;
        if(res.data.errno==1001)
        {
          this.$message.success("删除评论成功");
          if(this.isDelRoot)
          {
            this.loadAfterDel();
            this.getComment();
            this.pageSizes.splice(this.delSeq,1);
            this.currentPages.splice(this.delSeq,1);
            this.isDelRoot=false;
          }
          else
            this.getComment();
        }
      })
    },
    handleClick() {
      if(!this.isOperate)
        this.isOp=false;
    },
    backToTop() {
      let timer;
      timer = setInterval(()=>{
        window.scrollTo(0, 0);
        clearInterval(timer);
      }, 100);
    },
    fn() {
      var t = document.documentElement.scrollTop||document.body.scrollTop;
      var scrollup = document.getElementById('backToTop');
      if(t>=300)
          scrollup.style.display="block";
      else
          scrollup.style.display="none";
    },
    Express() {
      this.isExpressed=true;
      var Owarp=document.getElementsByClassName('wrap')[0];
      Owarp.setAttribute('style','display:block;max-height: 320px;overflow: hidden;');
    },
    unExpress() {
      this.isExpressed=false;
      var Owarp=document.getElementsByClassName('wrap')[0];
      Owarp.setAttribute('style','');
    },
    min(a,b) {
      if(a<b)
        return a;
      return b;
    }
  },
  created() {
    this.comments=[]
    this.form.paperID=this.$route.params.pid;
    this.form.sessionID=document.cookie;
    this.form.avatar=sessionStorage.getItem('avatar');

    this.isloadMsg=true;
    this.getInfo();
    this.isloadMsg=false;

    this.getComment();
  },
  mounted() {
    var Osort1=document.getElementsByClassName("sort")[0];
    Osort1.setAttribute("style","color:rgb(23,169,218);");
    window.addEventListener('click',this.handleClick);

    this.relatedPapers=this.papers[0];
    this.sortByHot();

    window.addEventListener('scroll',this.fn,true);
  },
  destroyed() {
    window.removeEventListener('scroll',this.fn,true);
    window.removeEventListener('click',this.handleClick);
  },
  computed: {
    noMore() {
      return this.count>=this.comments.length;
    },
    disabled() {
      return this.isLoading||this.noMore;
    }
  }
}
</script>

<style scoped>
.clear{
  clear: both;
}
.ground{
  min-width: 1350px;
  background-color: rgb(249,249,249);
}
.content{
  background-color: white;
  box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
  margin: 20px 50px;
  padding: 10px 160px;
}
header{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
header img{
  position: relative;
  left: -40px;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  cursor: pointer;
}
header span{
  position: relative;
  left: -20px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
}
.operations{
  float: right;
}
.operations i{
  margin-left: 14px;
}
.operations img{
  cursor: pointer;
  border-radius: 50%;
  width: 25px;
  height: 25px;
}
.authors{
  display: flex;
  align-items: center;
  justify-content: center;
}
.authors span{
  line-height: 20px;
  margin-right: 22px;
  font-size: 14px;
  color: #4b5cb3;
  cursor: pointer;
}
.authors span:hover,
.hasLink:hover
{
  color: rgba(248, 180, 79, 0.923);
}
.organization{
  margin: 12px 0;
  text-align: center;
  font-size: 14px;
  color: #4b5cb3;
}
/*
.organization span{
  cursor: pointer;
}
*/
.paperInfo{
  margin-bottom: 15px;
  font-size: 15px;
}
.row{
  display: table;
}
.item{
  display: table-cell;
  font-weight: 600;
  white-space: nowrap;
  width: 85px;
  letter-spacing: 4px;
}
.row span:nth-child(2){
  line-height: 220%;
  color: #666666;
}
.textControl span{
  cursor: pointer;
  color: rgb(0,140,200);
}
.textControl span:hover{
  text-decoration: underline;
}
.hasLink{
  color: #516bb8;
  margin-right: 20px;
  cursor: pointer;
}
.relatedPapers{
  position: relative;
  margin-left: -20px;
}
.paperType{
  font-weight: bold;
  font-size: 13px;
  margin: 0 20px;
  cursor: pointer;
}
.underline{
  color: #e5e5e5;
  font-weight: bold;
  margin-top: -8px;
  user-select: none;
}
#slider{
  color: black;
  position: absolute;
  top: 10.4px;
  left: 20px;
  font-weight: bold;
  user-select: none;
  transition: all 0.1s;
}
.paperList{
  margin:10px 0 0 20px;
  font-size: 14px;
}
.commentArea{
  margin-top: 16px;
  padding-bottom: 100px;
}
.commentHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sort{
  cursor: pointer;
  font-size: 14px;
}
.sort:hover{
  color: rgb(23,169,218);
}
.myComment{
  margin: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.myComment img{
  border-radius: 50%;
  height: 80px;
  width: 80px;
  margin-right: 15px;
}
.myComment span{
  margin-left: 20px;
  height: 70px;
  width: 100px;
  background-color: rgb(128,215,246);
  border-radius: 6px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.myComment span:hover{
  background-color: rgb(0,174,236);
}
.rootComment{
  padding-left:110px;
  margin-bottom: 20px;
}
.rootAvatar{
  display: flex;
  justify-content: center;
  left: 210px;
  width: 80px;
  position: absolute;
}
.rootAvatar img{
  border-radius: 50%;
  height: 80px;
  width: 80px;
  cursor: pointer;
  margin-left: 20px;
}
.rootContent{
  padding-top: 2px;
  min-height: 80px;
}
.authorSign{
  padding: 1px 4px;
  margin-left:20px;
  font-size:12px;
  background-color: rgb(255, 0, 81);
  color: white;
  border-radius: 3px;
}
.rootCommentInfo{
  padding-top: 2px;
  display:flex;
  align-items:center;
  color:rgb(148,153,160);
  font-size: 15px;
}
.reply{
  margin: 0 10px 0 8px;
  cursor: pointer;
}
.reply:hover{
  color: rgb(0,140,200);
}
.replies{
  padding-bottom:10px;
  padding-left: 80px;
}
.replyAvatar{
  display: flex;
  justify-content: center;
  left: 300px;
  width: 80px;
  position: absolute;
}
.replyAvatar img{
  border-radius: 50%;
  height: 60px;
  width: 60px;
  cursor: pointer;
  margin-left: 20px;
}
.replyCommentInfo{
  padding-top: 1px;
  display:flex;
  align-items:center;
  color:rgb(148,153,160);
  font-size: 13px;
}
.atSomeone{
  color: rgb(0,140,200);
}
.operation span{
  position: absolute;
  display: inline-block;
  width: 100px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  margin-top: -4px;
  padding: 5px 0;
  text-align: center;
  font-size: 14px;
}
.innerOperation span{
  position: absolute;
  display: inline-block;
  width: 90px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  margin-top: -4.5px;
  padding: 5px 0;
  text-align: center;
  font-size: 13px;
}
.operation span:hover,
.innerOperation span:hover{
  background-color: rgb(249, 249, 249);
  color: rgb(11, 198, 255);
}
.wrapComment{
  margin-top: 10px;
  position: relative;
  left: -70px;
  font-size: 13px;
  color:rgb(148,153,160);
}
.wrapComment span{
  cursor: pointer;
}
.wrapComment span:hover{
  color: rgb(0,140,200);
}
.pages{
  margin-top: 10px;
  position: relative;
  left: -80px;
}
.appendixInfo{
  font-size: 13px;
  text-align: center;
  margin-top: 20px;
  color: rgb(147, 147, 147);
}
#backToTop span{
  cursor: pointer;
  position: fixed;
  bottom: 30px;
  right: 90px;
  background-color: rgb(220, 224, 255);
  border-radius: 50%;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  color: white;
}
#backToTop span:hover{
  background-color: rgb(176, 182, 255);
}
</style>
